<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <script>
            window.clickHandler = function (params) {
                console.log('触发了click事件', params)
            }
        </script>
        <div id="app">
            <button @click="clickHandler">按钮1</button>

            <button @click="clickHandler(22)">按钮2</button>

            <button @click="clickHandler($event, 33)">按钮3</button>

            <button @click="this.clickHandler">按钮4</button>

            <button @click="this.clickHandler(55)">按钮5</button>

            <!-- 和按钮5是一样的,为了验证按钮5榜示事件前面的this不是vue -->
            <button @click="this.clickHandler(66)">按钮6</button>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {},
                methods: {
                    clickHandler(e, params) {
                        console.log('触发了按钮', e, params);
                    }
                }
            })

            // 一、$event从哪里来?
            // 当@click绑定回调的时候,分两种情况
            //      函数不加小括号
            //          相当于vue底层直接获取的是methods当中函数的地址
            //      函数加小括号
            //          相当于vue底层包裹了一层模板中写的回调
            //          而包裹的这一层,形参是 $event, 所以我们在模板中加小括号必须使用$event来拿事件对象
            // 二、在模板中明明可以写this,但是不加小括号调用方法的时候不报错
            //    加小括号调用方法的时候报错,为什么?
            //      在模板中可以写this
            //      只是我们在调用方法的时候,书写this同时给这个方法加了小括号时
            //      此时相当于vue底层给我们当前点击的事件包裹了一层
            //      包裹之后的函数叫 fns, 点击按钮5的时候执行的是 fns 这个包裹的函数
            //      此时如果带着this的话,这个this指向发生了变化,不是vue实例了
            //          此时在非严格模式下,这个this指向window
            //              在严格模式下,这个this是undefined
            // 打断点的位置在源码的2200行,想下去自己试试的可以在源码中打断点看一看
        </script>
    </body>
</html>